<template>
<div class="login_body">
    <el-row>
        <el-col :span='23'>
           <el-form label-width="80px" :rules='rules' :model='formData'>
              <el-form-item label='用户名:' prop='un'>
                <el-input type="text" v-model='formData.un'></el-input>
              </el-form-item>
              <el-form-item label='密码:' prop='pw'>
                <el-input type="password" v-model='formData.pw'></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type='success' @click="loginHander">登录</el-button>
              </el-form-item>
           </el-form>
        </el-col>
     </el-row>
    <!-- <div>
        <input class="login_text" type="text" placeHolder="账户名/手机号/Email" v-model="username">
    </div>
    <div>
        <input class="login_text" type="password" placeHolder="请输入您的密码" v-model="password">
    </div>
    <div class="login_btn">
        <input type="submit" value="登录">
    </div> -->
    <div class="login_link">
        <router-link to="/register" tag="a">立即注册</router-link>
        <a >找回密码</a>
    </div>
</div>
</template>

<script>
export default {
    name:'Login',
    data(){
      return {
        formData:{
          un:'',
          pw:''
        },
        rules:{
          un:[
            {required:true,message:'用户名必须输入'},
            {min:2,max:8,message:'用户名必须是3到8个字符'}
          ],
          pw:[
            {required:true,message:'密码必须输入'},
            {min:2,max:8,message:'密码必须是3到8个字符'}
          ]
        }
      }
    },
    methods:{
      async loginHander(){
        let data = await this.$axios.post('/users/login',{
          username:this.formData.un,
          password:this.formData.pw
        })
        console.log(data);
        if(data.code===0){
          this.$message({
            message: '用户登录成功',
            type: 'success'
          })
          console.log(this.formData.un);
          localStorage.setItem('username',JSON.stringify(this.formData.un))
          this.$router.push('/my')
          return
        }else{
          this.$message({
            message: '用户名或密码错误'
          })
          console.log(this.formData.un);
        }
      }
    }
}
</script>

<style scoped>
#content .login_body{  width:100%;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
.el-row .el-button{background-color: #e54847;width: 100%;}
.el-col-23{margin-top: 20px;}
</style>